.pd-tag {
  flex-shrink: 0;
  max-width: 100%;
  &--s {
    padding: 6px 8px;
  }
  &--m {
    padding: 8px 10px;
  }
  &--l {
    padding: 10px 14px;
  }
  &--default {
    background-color: $appPrimaryColor;
  }
  &--primary {
    background-color: $appPrimaryColor;
  }

  &--secondary {
    background-color: $appSecondaryColor;
  }

  &--success {
    background-color: $appSuccessColor;
  }

  &--danger {
    background-color: $appDangerColor;
  }

  &--warning {
    background-color: $appWarningColor;
  }

  &--custom1 {
    background-color: $appCustomColor1;
  }

  &--custom2 {
    background-color: $appCustomColor2;
  }

  &--custom3 {
    background-color: $appCustomColor3;
  }

  &--plain {
    &--default {
      border: 1px solid $appTextColor2;
    }

    &--primary {
      border: 1px solid $appPrimaryColor;
    }

    &--secondary {
      border: 1px solid $appSecondaryColor;
    }

    &--success {
      border: 1px solid $appSuccessColor;
    }

    &--danger {
      border: 1px solid $appDangerColor;
    }

    &--warning {
      border: 1px solid $appWarningColor;
    }

    &--custom1 {
      border: 1px solid $appCustomColor1;
    }

    &--custom2 {
      border: 1px solid $appCustomColor2;
    }

    &--custom3 {
      border: 1px solid $appCustomColor3;
    }
  }

  &--round {
    border-radius: 30px;
  }

  &--round-min {
    border-radius: 4px;
  }
}
